<div>
    <div id="flow_designer_container">
        <div id="flow_designer_legend">
            <table class="ui-btn-corner-bottom ui-shadow" style="margin-top:5px;border:solid 0px #727379;width:241px;background:#ffffff;box-shadow:0px 1px 1px #000000">
                <tr>
                    <td colspan="4">
                        <div id="legendtitle" style="position:absolute; padding-top:5px;top:-25px; z-index:2300; width:239px; height:22px; text-align:center;"
                             class="ui-btn ui-btn-icon-none  ui-btn-corner-top ui-shadow ui-btn-up-a">Legend
                            <img src="modules/flowDesigner/images/delete.png"  style="position: absolute;top:0px;left:210px;max-width:26px;cursor:pointer;"
                                 onclick="$('#flow_designer_legend').hide();"></div>
                    </td>
                </tr>
                <tr>
                    <td align="center" style="padding-top:2px"><img src="modules/flowDesigner/images/event.png" style="max-height:30px"></td>
                    <td align="center" style="padding-left:1px"><img src="modules/flowDesigner/images/funlegend.png" style="height:30px"></td>
                    <td style="padding-left:5px" align="center"><img src="modules/flowDesigner/images/apibg.png" style="max-height:25px"></td>
                    <td align="center"><img src="modules/flowDesigner/images/paraflag.png" style="height: 30px;margin-left:-5px;"></td>
                </tr>
                <tr>
                    <td align="center">Event</td> <td align="center" style="padding-left:15px">Function</td>
                    <td style="padding-left:5px" align="center">Service</td><td align="center">Parameter</td>
                </tr>

            </table>
        </div>
        <div id="flow_designer_title">Function Designer</div>

        <div  id="flow_scroll_tabs">
            <span class="left"><a href="javascript:void(0);" onclick="flowDesigner.tabManager.labelLeftMove()" ></a></span>
            <div class="mid" id="labelMenuMid">
                <ul>
                </ul>
            </div>
            <div class="add">
                <a href="javascript:void(0);" onclick="flowDesigner.tabManager.addLabel()"></a>
            </div>
            <span class="right"><a  href="javascript:void(0);"  onclick="flowDesigner.tabManager.labelRightMove()" class="to_s"></a></span>
        </div>

        <div id="flow_view_container"></div>

    </div>
    <img id="flow_designer_open" title="Open Function Designer" src="modules/flowDesigner/images/switch.png"/>

    <img id="flow_designer_close" title="Close Function Designer"  src="modules/flowDesigner/images/switch.png"/>

    <div id="event_selector_container" style="display:none;">
        <div id="event_selector"></div>
        <img src="modules/flowDesigner/images/delete.png" style="width:26px;position:absolute;left:150px;top:2px"
             onclick="flowDesigner.eventAndFunSelectCallback();">
    </div>

    <div id="flow_ui_moving"></div>

</div>